<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="李愧愧">
    <title>二级联动</title>
    <style>

    </style>
</head>

<body>

    <select name="省份" id="province"></select>
    <select name="城市" id="city"></select>
    <script>
        // 数据源
        var data = [{
                province: '河南',
                city: ['郑州', '周口', '开封', '新乡', '信阳']
            },
            {
                province: '河北',
                city: ['石家庄', '保定', '秦皇岛', '唐山']
            },
            {
                province: '山西',
                city: ['太原', '大同', '阳泉']
            }
        ]
        // var province = ['河南','河北','山西']
        // var city = [
        //     {
        //         province:'郑州',
        //         city:'河南'
        //     },
        //     {
        //         province:'周口',
        //         city:'河南'
        //     },
        //     {
        //         province:'开封',
        //         city:'河南'
        //     },
        //     {
        //         province:'新乡',
        //         city:'河南'
        //     },
        //     {
        //         province:'信阳',
        //         city:'河南'
        //     },
        //     {
        //         province:'石家庄',
        //         city:'河北'
        //     },
        //     {
        //         province:'保定',
        //         city:'河北'
        //     },
        // ]


        // 1.找城市省份下拉列表标签
        var provinceSelect = document.querySelector('#province')
        var citySelect = document.querySelector('#city')

        // 2.把所有的省份名取出并显示到第一个下拉列表
        data.forEach(function (item, index) {
            console.dir(item)
            var option = document.createElement('option');
            option.innerText = item.province;
            provinceSelect.appendChild(option);
        })

        // 3.把数组中的第一个对象中的城市默认显示到城市下拉列表
        var citys = data[0].city;
        citys.forEach(function (item) {
            var option = document.createElement('option');
            option.innerText = item;
            citySelect.appendChild(option);
        })

        // 4.二级联动 当切换省份时，让城市列表刷新，显示当前省份的城市
        provinceSelect.onchange = function () {
            // selectedIndex下拉列表当前选中的索引
            console.log(provinceSelect.selectedIndex);
            // 通过选中索引从数据源中把当前省份所在的对象取出
            var obj = data[provinceSelect.selectedIndex]
            console.dir(obj);
            // 先清空城市下拉列表
            citySelect.innerHTML=''
            // 从对象中取出城市列表
            obj.city.forEach(function (item) {
                var option = document.createElement('option');
                option.innerText = item;
                citySelect.appendChild(option);
            })
        }
    </script>
</body>

</html>